<template>
  <div class="dept-person base-content">
    <div v-loading="loadingTree" class="left">
      <el-scrollbar style="height:100%">
        <el-tree
          ref="tree"
          class="dept-tree"
          :data="deptData"
          :props="defaultProps"
          :load="loadDept"
          lazy
          :expand-on-click-node="false"
          :default-expanded-keys="defaultExpanded"
          node-key="id"
          highlight-current
          @node-click="handleNodeClick"
        />
      </el-scrollbar>
    </div>
    <div class="right">
      <keep-alive :include="keepAliveMenu">
        <router-view :current-dept-i-d="currentDeptID" :dept-name="currentDeptName" :is-dept="isDept" />
      </keep-alive>
    </div>

  </div>
</template>
<script>
import { getDeptList } from '@/api/personInfoMange'
import { mapGetters } from 'vuex'
export default {
  name: 'PersonInfoManage',
  data() {
    return {
      deptData: [],
      defaultProps: {
        label: 'name'
      },
      currentDeptID: '',
      currentDeptName: '',
      loadingTree: false,
      defaultExpanded: [],
      isDept: 'false' // 当前选中的是部门还是公司， true：部门，false： 公司，导出的时候需要
    }
  },
  computed: { ...mapGetters(['keepAliveMenu']) },
  created() {
    this.$router.push({ name: 'personInfoManage.performance.performanceList' })
  },

  methods: {
    handleNodeClick(data) {
      this.currentDeptID = data.id
      this.currentDeptName = data.name
      this.isDept = data.level === '3' ? 'true' : 'false'
      this.$router.push({ name: 'personInfoManage.performance.performanceList' })
    },
    // 加载部门树
    async loadDept(node, resolve) {
      let id
      if (node.level === 0) {
        id = null
        this.loadingTree = true
      } else {
        id = node.data.id
      }
      try {
        let { data } = await getDeptList({ id })
        data = data || []
        if (data.length !== 0) {
          if (data[0].level === '2') {
            this.$nextTick(() => {
              this.defaultExpanded = [data[0]]
            })
          } else if (data[0].level === '3') {
            const hasCurrentKey = this.$refs.tree.getCurrentKey()
            if (!hasCurrentKey) {
              this.$nextTick(() => {
                const firstRecord = data[0]
                this.$refs.tree.setCurrentNode(firstRecord)
                this.currentDeptID = firstRecord.id
                this.currentDeptName = firstRecord.name
                this.isDept = 'true'
              })
            }
          }
        }
        resolve(data)
      } catch (err) {
        node.loaded = false
      }
      node.loading = false
      this.loadingTree = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dept-person{
  min-height: 100%;
  position: relative;
  .left{
    width: 300px;
    position: absolute;
    left: 0;
    height: 100%;
    background: #fff;

    z-index: 1000;
    .dept-tree {
      padding: 15px;
      // >>>.el-tree-node{
      //   > .el-tree-node__children{
      //       overflow: visible !important;
      //   }
      // }
    }
    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .right {
    position: absolute;
    right: 0;
    height: 100%;
    width: calc(100% - 320px);
    margin-left: 20px;
    .person-edit{
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      /deep/ .public_top{
        height: 100%;
        // margin-bottom: 0;
        overflow-y: auto;
      }
    }
  }
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded
{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree /deep/ .el-icon-caret-right:before {
  background: url("../../assets/imgs/add.png") no-repeat 0 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
//有子节点 且已展开
.el-tree
  /deep/
  .is-expanded
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../../assets/imgs/0.png") no-repeat 0 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
// //没有子节点
.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
  background: none;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
</style>
